<template>
	<view class="page">
		<view class="title">
			<view class="tt">
				{{province}}
			</view>
			<view class="tt">
				{{city}}
			</view>
			<view class="tt">
				{{area}}
			</view>
		</view>
		<view class="link u-f u-f-jsb">
			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == isprovince?'active':''" @click="selectProvince(item, index)"
						v-for="(item,index) in provincelist" :key="index">
						{{item.label}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == iscity?'active':''" @click="selectCity(item, index)"
						v-for="(item,index) in citylist" :key="index">{{item.label}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == isarea?'active':''" @click="selectaArea(item, index)"
						v-for="(item,index) in arealist" :key="index">{{item.label}}
					</li>
				</scroll-view>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		address
	} from '../data/data.js'
	export default {
		name: "linkage",
		data() {
			return {
				isprovince: null,
				iscity: null,
				isarea: null,
				province: '',
				city: '',
				area: '',
				provincelist: [],
				citylist: [],
				arealist: [],
				chooseprovince: '',
				chooseprovinceId: null,
				choosecity: '',
				choosecityId: null,
				choosearea: '',
				chooseareaId: null,
				heightCot: 0,
			};
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					console.log(res.safeArea.height)
					this.heightCot = (res.safeArea.height * 2) / 2
				}
			})
			this.provincelist = address
		},
		onLoad() {
		},
		methods: {
			selectProvince(item, i) {
				this.isprovince = i
				if (item.child) {
					this.citylist = item.child
				}
				this.setchose(1)
				this.chooseprovince = item.label
				this.chooseprovinceId = item.value
				this.getchoose()
			},
			selectCity(item, i) {
				this.iscity = i
				if (item.child) {
					this.arealist = item.child
				}
				this.setchose(2)
				this.choosecity = item.label
				this.choosecityId = item.value
				this.getchoose()
			},
			selectaArea(item, i) {
				this.isarea = i
				this.choosearea = item.label
				this.chooseareaId = item.value
				this.getchoose()
			},
			getchoose() {
				const {
					chooseprovince,
					chooseprovinceId,
					choosecity,
					choosecityId,
					choosearea,
					chooseareaId
				} = this
				this.$emit('conceal', {
					chooseprovince,
					chooseprovinceId,
					choosecity,
					choosecityId,
					choosearea,
					chooseareaId
				})
			},
			setchose(id){
				if(id == 1){
					this.choosecity = ''
					this.choosearea = ''
					this.iscity = null
					this.isarea = null
				}else if(id == 2){
					this.choosearea = ''
					this.isarea = null
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	ul,
	li {
		list-style: none;
	}

	.page {
		.link {
			width: auto;
			padding: 0rpx 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background: #FFFFFF;

			.content {
				//margin-top: 30upx;
				width: 150rpx;
				height: 500upx;
				overflow-y: auto;
				text-align: center;

				li {
					border-bottom: 1px solid #f1f1f1;
					padding: 30upx 0;
				}

				li:last-child {
					border-bototm: none !important;
				}

				.active {
					color: #FF5529 !important;
				}

			}
		}
	}
</style>
